<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>层次选择器的应用</title>
<style type="text/css">
    div,span,p {
    width:140px;
    height:140px;
    margin:5px;
    background:#aaa;
	border:#000 1px solid;
    float:left;
    font-size:17px;
    font-family:Verdana;
  }
  div.mini { 
    width:55px;
    height:55px;
    background-color: #aaa;
    font-size:12px;
  }
  div.hide { 
    display:none;
  }
</style>
<script type="text/javascript" src="jquery-1.8.0.js"></script>
 
<script type="text/javascript">
     $(function(){
		 //选择body内的所有div元素:不管div的位置层次
		 $("#btn1").click(function(){
			 $("body div").css("background","pink");
			 })
			 
		//在body内，选择子元素是div的:选取body下元素名为div的直接子元素
				 $("#btn2").click(function(){
			 $("body>div").css("background","bbffaa");
			 })

        //选择所有class为one的下一个div元素:返回的是集合元素，这里是三个div
				 $("#btn3").click(function(){
			// $(".one+div").css("background","skyblue");  
			 $(".one").next("div").css("background","red");   //等价于上一条语句的效果  这里也返回的三个div
			//$(".one").nextAll().css("background","red"); //所有的都可以获得得到
			 })
			 
			 //选择id为two的元素后面的所有div兄弟元素
			  $("#btn4").click(function(){
			 //$("#two~div").css("background","bbffaa");//选取ID为two后面的所有的div兄弟元素  
			// $("#two").nextAll("div").css("background","red"); //所有的都可以获得得到
			
			/*
			siblings()方法:不带参的：而此方法与前后位置无关，只要是同辈节点就能匹配上
                参数的：而此方法与前后位置无关，只要是同辈节点就能匹配上,匹配的同级节点必须是限定的类型
			*/
			//$("#two").siblings("div").css("background","bbffcc");
			$("#two").siblings().css("background","bbffcc");//全部的兄弟节点，不分前后位置的
			 })
		 
		 })
</script>
</head>

<body>
<h3>层次选择器</h3>
<input type="button" value="选择body内的所有div元素." id="btn1" />
<input type="button" value="在body内，选择子元素是div的." id="btn2" />
<input type="button" value="选择所有class为one的下一个div元素."id="btn3" />
<input type="button" value="选择id为two的元素后面的所有div兄弟元素"id="btn4" />
<br /><br />

 <!-- 测试的元素 -->
  <div class="one" id="one" >
 id为one,class为one的div
      <div class="mini">class为mini</div>
  </div> 
    <div class="one"  id="two" title="test" >
	 id为two,class为one,title为test的div.
      <div class="mini"  title="other">class为mini,title为other</div>
      <div class="mini"  title="test" style="position:relative; top:0px;right:1px;">class为mini,title为test</div>
  </div> 
  <div class="one">
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
	  <div class="mini">class为mini</div>
	  <div class="mini"></div>
  </div>
  <div class="one">
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
	  <div class="mini">class为mini</div>
	  <div class="mini"  title="tesst">class为mini,title为tesst</div>
  </div> 
  <div style="display:none;"  class="none">style的display为"none"的div</div>
  
  <div class="hide">class为"hide"的div</div>
 
  <div>
  包含input的type为"hidden"的div<input type="hidden" name="nn"/>
  </div>
  <span id="mover">正在执行动画的span元素.</span>
</body>
</html>
